<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back>
				<view slot="title">
					<view id="title" class="fw-bolder">{{renders.main_title}}</view>
				</view>
				<!-- <view slot="tools">
					
				</view> -->
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view id="categories">
				<view class="categories">
					<view class="categories_box d-flex justify-content-between align-self-baseline">
						<view class="top_categories">
							<view class="top_categories_box d-padding">
								<view class="category" v-for="(category, index) in renders.tops" :key="index" @click="switchTop(category.id)">
									<view class="name text-center bg_less color fw-bolder" v-if="parseInt(category.id) === parseInt(data.sections.current_id)">{{category.guard_name}}</view>
									<view class="name text-center" v-else>{{category.guard_name}}</view>
								</view>
							</view>
						</view>
						<!-- <view class="sub_categories">
							<view class="sub_categories_box section">
								<view class="sub_cates d-flex flex-wrap align-items-center">
									<view class="category" v-for="(category, index) in data.sections.categories" :key="index" @click="navigateAction('goods', {category_id: category.id})">
										<view class="logo_box">
											<u--image :src="category.logo" width="120rpx" height="120rpx" radius="120rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="logo">
											  <template v-slot:loading>
											     <image src="@/static/media/images/logo-loading.png" mode="aspectFit"></image>
											  </template>
											  <template v-slot:error>
											     <image src="@/static/media/images/logo-loading.png" mode="aspectFit"></image>
											  </template>
											</u--image>
										</view>
										<view class="name text-center u-line-1">{{category.guard_name}}</view>
									</view>
								</view>
							</view>
						</view> -->
						<view class="sub_categories">
							<view class="sub_categories_box section">
								<view class="sub_cates d-flex flex-wrap align-items-center">
									<view class="category" v-for="(item, index) in data.sections.categories" :key="index" @click="navigateAction(item.alias, item.params)">
										<view class="logo_box">
											<u--image :src="item.cover" width="120rpx" height="120rpx" radius="120rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="logo">
											  <template v-slot:loading>
											     <image src="@/static/media/images/logo-loading.png" mode="aspectFit"></image>
											  </template>
											  <template v-slot:error>
											     <image src="@/static/media/images/logo-loading.png" mode="aspectFit"></image>
											  </template>
											</u--image>
										</view>
										<view class="name text-center u-line-1">{{item.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {

				},
				renders: {
					main_title: "",
					tops: [],
					categories: {}
				},
				data: {
					sections: {
						current_id: 0,
						categories: []
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
			},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;
				//发起请求
				that.nii_common.request.build('goods_category/information', {}, 'GET', function (res) {
					//设置数据
					that.renders = res.data;
					//设置准备已就绪
					that.ready = true;
					//设置选中
					that.switchTop(that.renders.tops[0].id);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			switchTop: function (current_id) {
				//设置对象
				let that = this;
				//设置选中ID
				that.data.sections.current_id = current_id;
				//设置对应分类
				that.data.sections.categories = that.renders.categories[current_id];
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		.domxee_icon {
			font-size: 40rpx;
			line-height: 34rpx;
		}
	}
	#content_wrapper {
		padding-bottom: 300rpx;
		#categories {
			margin-top: 30rpx;
			.categories {
				.categories_box {
					.top_categories {
						.top_categories_box {
							.category {
								margin-top: 30rpx;
								.name {
									width: 160rpx;
									padding: 10rpx 0;
									border-radius: 20rpx;
									font-size: 28rpx;
									line-height: 40rpx;
								}
							}
						}
					}
					.sub_categories {
						width: 528rpx;
						.sub_categories_box {
							border-radius: 20rpx 0rpx 0rpx 20rpx;
							padding: 10rpx 40rpx 100rpx 40rpx;
							.sub_cates {
								.category {
									margin: 40rpx 40rpx 0 0;
									.logo_box {
										width: 120rpx;
										height: 120rpx;
									}
									.name {
										margin-top: 10rpx;
										width: 120rpx;
										font-size: 26rpx;
										line-height: 36rpx;
									}
								}
								.category:nth-of-type(3n) {
									margin-right: 0;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
